<template>
  <div>
    <h1>请选择你喜欢的专栏</h1>
    <!-- <form action="" > -->
    <!-- <input type="checkbox" v-model="flag">{{item}} -->
    <!-- <input type="checkbox" v-model="flag">科幻
   <input type="checkbox">喜剧
   <input type="checkbox">动漫
   <input type="checkbox">冒险
   <input type="checkbox">科技
   <input type="checkbox">军事
   <input type="checkbox">娱乐
   <input type="checkbox">奇闻
   
   </form> -->
   <!-- 把v-model的值都装到数组里面 -->
<form action="" >
<input type="checkbox" id="1" value="科幻" v-model="arr">
<label for="1">科幻</label>
<input type="checkbox" id="2" value="喜剧" v-model="arr">
<label for="2">喜剧</label>
<input type="checkbox" id="3" value="动漫" v-model="arr">
<label for="3">动漫</label>
<input type="checkbox" id="4" value="冒险" v-model="arr">
<label for="4">冒险</label>
<input type="checkbox" id="5" value="科技" v-model="arr">
<label for="5">科技</label>
<input type="checkbox" id="6" value="军事" v-model="arr">
<label for="6">军事</label>
<input type="checkbox" id="7" value="娱乐" v-model="arr">
<label for="7">娱乐</label>
<input type="checkbox" id="8" value="奇闻" v-model="arr">
<label for="8">奇闻</label>
</form>
<br>
<!-- <span>arr: {{ checkedNames }}</span> -->
<ul>
  <li v-for="item in arr" v-bind:key="item.id">{{item}}</li>
  
  
</ul>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      arr: [],
    };
  },
};
</script>

<style scoped></style>
